<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~ http://www.apache.org/licenses/LICENSE-2.0
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<app-paginated-entities [service]="service" pageSize="10" [(sortField)]="sortField" [(sortOrder)]="sortOrder"
                        [id]="'rolesList'"
                        #parent>
    <ng-container *ngIf="parent.items$ |async as roleItemLoader" >
        <ng-template [ngIf]="roleItemLoader.loading" #spinner let-modal>
            <div class="fixed-top d-flex justify-content-center mt-5 pt-5">
            <div class="spinner-border text-info mt-5" role="status">
                <span class="sr-only">Loading...</span>
            </div>
            </div>
        </ng-template>
    </ng-container>
    <ng-container *ngIf="parent.items$ |stripLoading|async as roleItem" >
            <table class="table table-striped table-bordered">
                <thead class="thead-light">
                <tr sorted [sortFieldEmitter]="parent.sortFieldChange" [sortOrderEmitter]="parent.sortOrderChange"
                    [toggleObserver]="parent">
                    <app-th-sorted [fieldArray]="['id']" contentText="roles.attributes.id"></app-th-sorted>
                    <app-th-sorted [fieldArray]="['name']" contentText="roles.attributes.name"></app-th-sorted>
                    <app-th-sorted [fieldArray]="['description']"
                                   contentText="roles.attributes.description"></app-th-sorted>
                    <app-th-sorted [fieldArray]="['assignable']"
                                   contentText="roles.attributes.assignable"></app-th-sorted>
                    <app-th-sorted [fieldArray]="['template_instance']"
                                   contentText="roles.attributes.template_instance"></app-th-sorted>
                    <app-th-sorted [fieldArray]="['resource']" contentText="roles.attributes.resource"></app-th-sorted>
                    <th>{{'headers.action' |translate}}</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngFor="let role  of roleItem.data" [ngClass]="(role.permanent)?'table-secondary':''">
                    <td><span data-toggle="tooltip" placement="left" ngbTooltip="{{role.id}}">{{role.id}}</span></td>
                    <td>{{role.name}}</td>
                    <td>{{role.description}}</td>
                    <td><span class="far" [attr.aria-valuetext]="role.assignable"
                              [ngClass]="role.assignable?'fa-check-circle':'fa-circle'"></span></td>
                    <td><span class="far" [attr.aria-valuetext]="role.template_instance"
                              [ngClass]="role.template_instance?'fa-check-circle':'fa-circle'"></span></td>
                    <td>{{role.resource}}</td>
                    <td>
                        <a [routerLink]="['..','edit', role.id]" [queryParams]="{editmode:true}"
                           [attr.title]="'roles.edit.head' |translate"><span class="fas fa-edit"></span></a>

                    </td>
                </tr>
                </tbody>
            </table>
    </ng-container>

</app-paginated-entities>

